import { Component } from "react";
import { View, Text } from "@tarojs/components";
import "./index.scss";
import "../images/public/style.css";
import LgButton from "../components/button";
import { LgPopLayer } from "../components/popLayer";

export default class Index extends Component {
  constructor(props) {
    super(props);
    this.handle = this.handle.bind(this);
  }
  state = { isOpen: false, position: "center" };

  componentWillMount() {}

  componentDidMount() {
    this.setState((preState) => ({ curData: "data" }));
  }

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  handle(data) {
    console.log(data);

    this.setState({ curData: data });
  }
  openLayerPage(position) {
    setTimeout(() => {
      this.setState({ isOpen: !this.state.isOpen });
    }, 200);
    this.setState({ position });
  }
  confirm() {
    console.log("触发了确定按钮...");
    this.setState({ isOpen: false });
  }
  cancel() {
    console.log("触发了关闭按钮...");
  }
  show() {
    this.setState({
      isOpen: false,
    });
  }
  render() {
    return (
      <View className="index">
        <View className="tip-title"> GZ007-弹出层 A款 遮罩弹出</View>
        <LgButton
          className="buttom"
          onClick={() => {
            this.openLayerPage("center");
          }}
          width={150}
        >
          A款 遮罩弹出
        </LgButton>

        <View className="tip-title"> GZ007-弹出层 B款 向下弹出</View>
        <LgButton
          className="buttom"
          onClick={() => {
            this.openLayerPage("top");
          }}
          width={150}
        >
          B款 向下弹出
        </LgButton>

        <View className="tip-title"> GZ007-弹出层 C款 向上弹出</View>
        <LgButton
          className="buttom"
          onClick={() => {
            this.openLayerPage("bottom");
          }}
          width={150}
        >
          C款 向上弹出
        </LgButton>

        <LgPopLayer
          isOpen={this.state.isOpen}
          confirm={this.confirm.bind(this)}
          showLayer={this.show.bind(this)}
          position={this.state.position}
          title={""}
          textContent={"窗口内容窗口内容窗口内容窗口内容窗口内容。"}
          customBg={
            <View style={{ backgroundColor: "#999" }}>
              <View className="propLayer_text-bg">背景插图</View>
            </View>
          }
          centerConfirmColor={"#0084ff "}
          centerCancelColor={"#666"}
          showClose
        >
          <View className="propLayer_text">事件内容区域</View>
        </LgPopLayer>
      </View>
    );
  }
}
